<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		ul li {
			list-style: none;
		}

		#main {
			width: 100%;
			height: 260px;
			margin: 40px 5%;
		}

		#main ul li {
			width: 200px;
			height: 260px;
			float: left;
			position: relative;
		}

		#main ul li div {
			width: 100%;
			height: 260px;
		}

		#main ul li div.des {
			position: absolute;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, .3);

		}

		#main ul li div.des h4 {
			color: #FFF;
			font-size: 30px;
			padding: 30px;
			width: 30px;
			margin: 0 auto;

		}
	</style>

</head>

<body>
	<div id="main">
		<div>
			<ul>
				<li>
					<div class="des">
						<h4>园林酒店</h4>
					</div>
					<div style="background: url(img/1.jpg) center;"></div>
				</li>
				<li>
					<div class="des">
						<h4>设计师酒店</h4>
					</div>
					<div style="background: url(img/2.jpg) center;"></div>
				</li>
				<li>
					<div class="des">
						<h4>青年旅社</h4>
					</div>
					<div style="background: url(img/3.jpg) center;"></div>
				</li>
				<li>
					<div class="des">
						<h4>特色客栈</h4>
					</div>
					<div style="background: url(img/4.jpg) center;"></div>
				</li>
				<li>
					<div class="des">
						<h4>海岛酒店</h4>
					</div>
					<div style="background: url(img/5.jpg) center;"></div>
				</li>
				<li>
					<div class="des">
						<h4>海外温泉</h4>
					</div>
					<div style="background: url(img/6.jpg) center;"></div>
				</li>
			</ul>
	</div>
</body>
<script src="./js/jquery.3.5.1.js"></script>
<script>
	$(function(){
        // 1.滑入：遮罩层消失，当前Li宽为400，其余为160
        // end()：当前元素结束后，返回上一级元素
        $('#main li').on('mouseover',function(){
            $(this).find('.des').hide().end().stop(true).animate({
                width:400
            })
            .siblings('li').stop(true).animate({
                width:160
            })
        })

        // 2.滑出：当前遮罩层显示，所有Li宽为200
        $('#main li').on('mouseout',function(){
            $(this).find('.des').show().end();
            $('#main li').stop(true).animate({
                width:200
            })
        })
    })

</script>

</html>